<template>
  <div class="registry-form-wrap">
    <Title />
    <el-form
      ref="registryFormRef"
      :model="registryForm"
      label-width="auto"
      :rules="rules"
    >
      <el-form-item prop="username">
        <el-input
          v-model="registryForm.username"
          prefix-icon="User"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          v-model="registryForm.phone"
          prefix-icon="Iphone"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="registryForm.password"
          prefix-icon="Lock"
          placeholder="请输入密码"
        />
      </el-form-item>
      <el-form-item prop="passwordAgain">
        <el-input
          v-model="registryForm.passwordAgain"
          prefix-icon="Lock"
          placeholder="请再次输入密码"
        />
      </el-form-item>
      <el-form-item prop="privacyAgain">
        <el-checkbox v-model="registryForm.privacyAgain"
          >我同意隐私协议</el-checkbox
        >
      </el-form-item>
    </el-form>
    <div class="button-container">
      <el-button
        size="large"
        type="primary"
        @click="handleRegistry(registryFormRef)"
        >注册</el-button
      >
      <el-button size="large" @click="emit('toLogin')">返回</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage, FormRules, FormInstance } from "element-plus";
import Title from "./Title.vue";
import { useUserStore } from "@/store/user";
import { useRouter } from "vue-router";
import { IRegistryUser } from "@/types/user";
const router = useRouter();
const store = useUserStore();
// 注册表单数据
const registryForm = reactive<IRegistryUser>({
  username: "xiehanbing",
  phone: "18666294043",
  password: "111222",
  passwordAgain: "111222",
  privacyAgain: true,
});
// 注册表单实例
const registryFormRef = ref<FormInstance>();
// 注册表单校验规则
const rules = reactive<FormRules<IRegistryUser>>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  passwordAgain: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
  ],
  privacyAgain: [
    { required: true, message: "请同意隐私协议", trigger: "change" },
  ],
});
const emit = defineEmits<{
  toLogin: [];
}>();
const handleRegistry = (registryFormRef: FormInstance | undefined) => {
  if (!registryFormRef) return;
  registryFormRef.validate((valid) => {
    if (valid) {
      store.registerUser(registryForm).then(() => {
        router.replace("/");
        ElMessage({
          message: "注册成功！欢迎体验",
          type: "success",
        });
      });
    }
  });
};
</script>
<style lang="less" scoped>
.registry-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 16px 20px;
  height: inherit;
  box-sizing: border-box;
  background-color: #fff;
  .button-container {
    display: flex;
    flex-direction: column;
    button {
      margin-left: 0;
    }
    button + button {
      margin-top: 20px;
    }
  }
}
</style>
